/**
 * @title 风险变动
 */
import React, { PureComponent } from 'react';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Tooltip } from 'antd';
import { connect } from 'dva';
import { SecondHeaderC, TableC } from '../../../../../comps';
import _ from 'lodash';

class RiskChange extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      tableData: {},
      loading: false,
    };
  }
  componentDidMount() {
    const { searchData } = this.props;
    if (searchData && searchData.portfolioCode) {
      let params = {
        portfolioCode: searchData.portfolioCode,
        dataDate: searchData.endDate,
      };
      this.getData(params);
    }
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (JSON.stringify(nextProps.searchData) !== JSON.stringify(this.props.searchData)) {
      let params = {
        portfolioCode: nextProps.searchData.portfolioCode,
        dataDate: nextProps.searchData.endDate,
      };
      this.getData(params);
    }
  }
  // 获取数据
  getData = (searchObj) => {
    this.setState({
      loading: true,
    });
    this.props.dispatch({
      type: 'riskAnalysisM/riskDailyChg',
      payload: {
        ...searchObj,
        currentPage: 1,
        numInPage: 20,
      },
      callback: (data) => {
        if (data) {
          this.setState({
            tableData: { ...data },
          });
        }
        this.setState({
          loading: false,
        });
      },
    });
  };

  render() {
    const { tableData = {}, loading } = this.state;
    const { colorType } = this.props;
    const { dataSource = [], columns = [] } = tableData;
    const columnsDailyChg = _.cloneDeep(columns);
    columnsDailyChg.map((item) => {
      item.dataIndex = item.key;
      if (item.key == 'data1') {
        item.align = 'right';
      }
      if (item.key == 'name') {
        item.render = (text) => {
          if (text == '市场风险') {
            return (
              <Tooltip overlayStyle={{ width: 100 }} placement='right' title={'修正久期'}>
                <span>{text}</span> <QuestionCircleOutlined style={{ lineHeight: 1.8, marginLeft: '5px' }} />
              </Tooltip>
            );
          } else {
            return <span>{text}</span>;
          }
        };
      }
    });
    return (
      <div style={{ width: '100%' }}>
        <SecondHeaderC title='风险变动' colorType={colorType} />
        <TableC columns={columnsDailyChg} rowKey='name' loading={loading} dataSource={dataSource || []} hidePage={true} colorType={colorType} />
      </div>
    );
  }
}
export default connect(({ riskAnalysisM }) => ({
  riskAnalysisM,
}))(RiskChange);
